
exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _relation = require('../mixins/relation');

const _constant = require('../utils/constant');

const _createNamespace = (0, _utils.createNamespace)('index-anchor');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [(0, _relation.ChildrenMixin)('vanIndexBar', {
    indexKey: 'childrenIndex',
  })],
  props: {
    index: [Number, String],
  },
  data: function data() {
    return {
      top: 0,
      left: null,
      width: null,
      active: false,
    };
  },
  computed: {
    sticky: function sticky() {
      return this.active && this.parent.sticky;
    },
    anchorStyle: function anchorStyle() {
      if (this.sticky) {
        return {
          zIndex: `${this.parent.zIndex}`,
          left: this.left ? `${this.left}px` : null,
          width: this.width ? `${this.width}px` : null,
          transform: `translate3d(0, ${this.top}px, 0)`,
          color: this.parent.highlightColor,
        };
      }
    },
  },
  mounted: function mounted() {
    this.height = this.$el.offsetHeight;
  },
  methods: {
    scrollIntoView: function scrollIntoView() {
      this.$el.scrollIntoView();
    },
  },
  render: function render() {
    let _ref;

    const h = arguments[0];
    const { sticky } = this;
    return h('div', {
      style: {
        height: sticky ? `${this.height}px` : null,
      },
    }, [h('div', {
      style: this.anchorStyle,
      class: [bem({
        sticky,
      }), (_ref = {}, _ref[_constant.BORDER_BOTTOM] = sticky, _ref)],
    }, [this.slots('default') || this.index])]);
  },
});

exports.default = _default;
